<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>avalon test</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
        <script src="../../dist/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                curPage: 1,
                totalPages: 20,
                totalItems: 193,
                pageItems: [1, 2, 3, 4, 5],
                pageSize: 10,
                changePage: function (p) {
                    this.curPage = p;
                    console.log('curPage:' + this.curPage);
                    if (this.totalPages <= 5) {
                        this.pageItems = avalon.range(1, this.totalPages + 1);
                    } else {
                        if (this.curPage < 4) {
                            this.pageItems = avalon.range(1, 6);
                        } else if (this.curPage > 3 && this.curPage < this.totalPages - 1) {
                            this.pageItems = avalon.range(this.curPage - 2, this.curPage + 3);
                        } else {
                            this.pageItems = avalon.range(this.totalPages - 4, this.totalPages + 1);
                        }
                    }
                }
            })
        </script>
    </head>

    <body>
        <div class="am-container" ms-controller="test">
            <div class="am-u-md-4">
                <p class="am-margin am-text-sm">共 {{@totalItems}} 条记录</p>
            </div>
            <div class="am-u-md-8">
                <ul class="am-pagination am-pagination-right am-text-xs">
                    <li><a href="javascript:;" ms-click="@changePage(1)">首页</a></li>
                    <li ms-class="{'am-disabled' : @curPage == 1}"><a href="javascript:;" ms-click="@changePage(@curPage-1)"><span class="am-icon-angle-double-left"></span></a></li>
                    <li ms-for="el in @pageItems" ms-class="{'am-active' : @curPage == el}" ms-click="@changePage(el)"><a href="javascript:;">{{el}}</a></li>
                    <li ms-class="{'am-disabled' : @curPage == @totalPages}"><a href="javascript:;" ms-click="@changePage(@curPage+1)"><span class="am-icon-angle-double-right"></span></a></li>
                    <li><a href="javascript:;" ms-click="@changePage(@totalPages)">尾页</a></li>
                </ul>
            </div>
        </div>
    </body>

</html>